<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-17 18:08:47
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-29 18:23:22
 * @FilePath: \ProtocolTool\src\renderer\src\views\OneClick\Record\index.vue
-->
<script lang="ts" setup>
import { h, createVNode } from 'vue'
import {
  ArrowLeftOutlined,
  BarsOutlined,
  DownOutlined,
  DownloadOutlined,
  DeleteOutlined,
  ExclamationCircleOutlined,
  SearchOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'
import { getTestPageAPI, deleteTestAPI, exportTestAPI } from '@/api/OneClick'
import dayjs from 'dayjs'
import { Modal, message } from 'ant-design-vue'

const emits = defineEmits(['return'])
// 一键测试列表
const testList = ref([])
// 表格列
const columns = [
  {
    title: '测试时间',
    dataIndex: 'startTime',
    key: 'time'
  },
  {
    title: '设备名称',
    dataIndex: 'instrName',
    key: 'name'
  },
  {
    title: '设备ID',
    dataIndex: 'clientId',
    key: 'clientId'
  },
  {
    title: '协议类型',
    dataIndex: 'protocolType',
    key: 'protocolType'
  },
  {
    title: '消耗时间',
    dataIndex: 'consume',
    key: 'consume'
  },
  {
    title: '测试状态',
    dataIndex: 'resultStatus',
    key: 'status'
  },
  {
    title: '测试结果',
    dataIndex: 'finalStatus',
    key: 'finalStatus'
  },
  {
    title: '操作',
    key: 'action',
    width: 200
  }
]
// 总条数
const total = ref(0)
// 分页查询参数
const pageParams = ref<any>({
  pageIndex: 1,
  pageSize: 6
})
// 获取测试分页
const getTestPage = async () => {
  const res = await getTestPageAPI(pageParams.value)
  testList.value = res.data.records
  total.value = res.data.total
}
getTestPage()
// 处理分页
const handlePageChange = ({ current }) => {
  pageParams.value.pageIndex = current
  getTestPage()
}
// 搜索
const handleSearch = () => {
  pageParams.value.pageIndex = 1
  getTestPage()
}
// 重置
const handleReset = () => {
  pageParams.value = {
    pageIndex: 1,
    pageSize: 6
  }
  getTestPage()
}
// 详情
const hadnleDetail = (id) => {
  window.api.newWin({ title: '测试详情', width: 980, height: 600, path: `/test/${id}` })
}
// 删除
const handleDelete = (id) => {
  Modal.confirm({
    icon: createVNode(ExclamationCircleOutlined),
    centered: true,
    title: '您确定要删除该测试记录吗?',
    okText: '确定',
    okType: 'danger',
    cancelText: '取消',
    onOk: async () => {
      const res: any = await deleteTestAPI(+id)
      message.success(res.msg)
      getTestPage()
    }
  })
}
// 导出
const handleExport = async (id) => {
  const res = await exportTestAPI(+id)
  const fileName = decodeURIComponent(
    res.headers['content-disposition'].replace('attachment;filename=', '')
  )
  window.api.saveFile(window.URL.createObjectURL(res.data), fileName)
}
</script>

<template>
  <div class="record">
    <div class="top">
      <ArrowLeftOutlined @click="emits('return')" />
      <div class="title ml-10">测试记录</div>
    </div>
    <div>
      <a-form :model="pageParams">
        <a-row :gutter="{ xs: 8, sm: 16, md: 24 }">
          <a-col :span="6">
            <a-form-item label="设备名称">
              <a-input v-model:value="pageParams.instrName" allow-clear @change="handleSearch" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="测试状态">
              <a-select v-model:value="pageParams.resultStatus" allow-clear @change="handleSearch">
                <a-select-option :value="100">测试完成</a-select-option>
                <a-select-option :value="88">测试取消</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="测试结果">
              <a-select v-model:value="pageParams.finalStatus" allow-clear @change="handleSearch">
                <a-select-option :value="1">已通过</a-select-option>
                <a-select-option :value="0">未通过</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item>
              <a-button type="primary" @click="handleSearch">
                <SearchOutlined />
                查询
              </a-button>
              <a-button style="margin-left: 10px" @click="handleReset">
                <ReloadOutlined />
                重置
              </a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="list">
      <a-table
        :data-source="testList"
        :columns="columns"
        :pagination="{
          total,
          current: pageParams.pageIndex,
          pageSize: pageParams.pageSize,
          showSizeChanger: false
        }"
        size="small"
        @change="handlePageChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'time'">
            <div>{{ dayjs(record.startTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </template>
          <template v-if="column.key === 'consume'">
            <div>{{ `${(record.consume / 1000).toFixed(1)} 秒` }}</div>
          </template>
          <template v-if="column.key === 'status'">
            <a-tag v-if="record.resultStatus === 100" :bordered="false" color="processing">
              测试完成
            </a-tag>
            <a-tag v-if="record.resultStatus === 88" :bordered="false" color="warning">
              测试取消
            </a-tag>
          </template>
          <template v-if="column.key === 'finalStatus'">
            <a-tag v-if="record.finalStatus === 1" :bordered="false" color="success">
              已通过
            </a-tag>
            <a-tag v-if="record.finalStatus === 0" :bordered="false" color="error"> 未通过 </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-button class="mr-10" :icon="h(BarsOutlined)" @click="hadnleDetail(record.testId)">
              详情
            </a-button>
            <!-- <a-button :icon="h(DownloadOutlined)"> 下载 </a-button> -->
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="handleExport(record.testId)">
                    <DownloadOutlined />
                    导出
                  </a-menu-item>
                  <a-menu-item key="2" @click="handleDelete(record.testId)">
                    <DeleteOutlined />
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button>
                更多
                <DownOutlined />
              </a-button>
            </a-dropdown>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="less" scoped>
.record {
  position: absolute;
  width: calc(100% - 20px);

  .top {
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin: 5px 0 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      transform: translateY(-1px);
    }
  }

  .search {
    padding: 5px 8px;
    margin-bottom: 10px;
  }
}
.ant-btn-primary {
  background-color: rgb(0, 185, 107);
}
.ant-btn-primary:not(:disabled):hover {
  color: #fff;
  background-color: #139937;
}
.ant-btn-default:not(:disabled):hover {
  color: #1a8c35;
  border-color: #139937;
}
</style>
